import React from 'react'
import './index.scss'
import Header from '../newsComponents/news-header'
import { withRouter } from 'react-router-dom'

function personalProfile(props) {
  return (
    <>
      <div className="container">
        <Header rightContent='/images/ellipsis.png' classNames='news_profile_header'
          props={props}
          title='好友名字' 
          rightClick={() => {
            props.history.push('/news/chatSettingsPersonal')
          }}/>
        <div className="content news_profile_content">
          {/* 上半部分 */}
          <div className="news_profile_content_top" style={
            { background: 'url("/images/HeadportraitStu.png") no-repeat center/contain' }
          }>
            <ul>
              <li><img src="/images/HeadportraitStu.png" alt="" /></li>
              <li>呀呀（学生）</li>
              <li>高三（9）班</li>
              <li>绍兴市实验高中</li>
            </ul>
          </div>

          {/* 下半部分 */}
          <div className="news_profile_content_bot">
            <ul>
              <li>
                <span>姓名</span>
                <div className="news_profile_content_bot_name" >来呀嘛来个小吆喝</div>
              </li>
              <li>
                <span>关联用户</span>
                <div className="news_profile_content_bot_img">
                  <figure>
                    <img src="/images/HeadportraitStu.png" alt="" />
                    <p>班主任</p>
                  </figure>
                  <figure>
                    <img src="/images/HeadportraitStu.png" alt="" />
                    <p>班主任</p>
                  </figure>
                  <figure>
                    <img src="/images/HeadportraitStu.png" alt="" />
                    <p>班主任</p>
                  </figure>
                </div>
              </li>
              <li>
                <button className="news_profile_content_bot_btn"
                // 点击跳转至聊天页面, 这里应该携带一个参数
                // onClick={() => {
                //   props.history.push('')
                // }}
                >
                  打开会话页面
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </>
  )
}

export default withRouter(personalProfile)
